<template>
  <div class="tmpl">
    <!-- 引入返回导航 -->
    <nav-bar title="图文分享"/>
    <div class="photo-header">
      <ul>
        <li v-for="(item,index) in  getimgcategory" :key="item.id" @click="getImages(item.id)">
          <a href="javascript:;">{{item.title}}</a>
        </li>
      </ul>
    </div>
    <div class="photo-list">
      <ul>
        <li v-for="(item, index) in imagesList" :key="item.id">
          <a>
            <img v-lazy="item.img_url">
            <p>
              <span>{{item.title}}</span>
              <br>
              <span>{{item.zhaiyao}}</span>
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default{
  	data(){
  		return{
			  getimgcategory:[],   //分类信息
			  imagesList:[]   // 图片列表
      }
    },
    created(){
	    let cateID = this.$route.query.categoryId ;
      this.getImgCategory();
      this.getImages(cateID)
    },
	  beforeRouteUpdate (to, from, next) {
		  // 在当前路由改变，但是该组件被复用时调用
		  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
		  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
		  // 可以访问组件实例 `this`
      // 一旦路由中的query或者params改变的话就会触发
      console.log(to)
      this.getImages(to.query.categoryId);
      next();
	  },
    methods:{
    	//获得图片列表上面的分类信息
	    getImgCategory(){
	    	this.$axios.get('getimgcategory')
          .then(res =>{
	          //加工，数组的第一个加一个全部
	          res.data.message.unshift({
		          id:0,
		          title:'全部'
	          })
          	this.getimgcategory = res.data.message;

          })
          .catch(err =>console.log('获取图文分享分类信息有误',err))
      },
      getImages(cateID){
	    	let obj = this;
	      obj.$axios.get('getimages/' +cateID)
          .then( res =>{
          	if(res.data.status == 0){
		          obj.imagesList = res.data.message;
		          if(obj.imagesList.length == 0){
			          obj.$toast({
                  message:'暂无图片!',
                  iconClass:'iconfont icon-debug',
				          duration:500
                })
              }
            }
          })
          .catch( err =>console.log('获取图片列表失败',err))
      }
    }
  }
</script>
<style>
  .photo-header li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
  }

  .photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
  }


  /*下面的图片*/

  .photo-list li {
    list-style: none;
    position: relative;
  }

  .photo-list li img {
    width: 100%;
    height: 230px;
    vertical-align: top;
  }

  .photo-list ul {
    padding-left: 0px;
    margin: 0;
  }

  .photo-list p {
    position: absolute;
    bottom: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
  }

  .photo-list p span:nth-child(1) {
    font-weight: bold;
    font-size: 16px;
  }



</style>
